import {
  Radio,InputNumber 
} from 'antd';



export function subFormCompSpanWidthRender(config: any, props: any) {
  const key = 'subFormCompSpan';

  const dw = 160;
  const spanWidthVal:any = [
    {key:'1/2',label:'1/2',val:dw/2},
    {key:'1/1',label:'标准',val:dw},
    {key:'2',label:'2倍',val:dw*2},
    {key:'diy',label:'自定义',val:config.subFormCompWidth},
  ]

  function onRadioChange(e: any) {
    const val = e.target.value;
    const data = { 
      ...config, 
      [key]: val,
      subFormCompWidth:spanWidthVal.find((v:any)=>v.key === val).val
    };
    console.log(data);
    props.onChangeCallback(data);
  }

  return (
    <div className="item" >
      <h4 className="tit">字段宽度：</h4>

      <Radio.Group
        onChange={onRadioChange}
        defaultValue={config[key]}
        value={config[key]}
        buttonStyle="solid">
          {
            spanWidthVal.map((v:any)=>(
              <Radio.Button key={v.key} value={v.key}>{v.label}</Radio.Button>
            ))
          }
      </Radio.Group>

      {config[key] === 'diy' && (
        <div style={{marginTop:'10px'}}>
          <InputNumber 
            size="small"
            value={config.subFormCompWidth}
            min={1} 
            max={800} 
            step={10}
            defaultValue={config.subFormCompWidth} 
            onChange={(val)=>{
              config.subFormCompWidth = val;
              props.onChangeCallback({...config})
            }} 
          />
          <span style={{marginLeft:'5px',fontSize:'18px'}}>px</span>
        </div>
      )}
    </div>
  )
}